<template>
    <div class="container">
        <div class="app-container">
            <!-- 展示树形结构 -->
            <el-tree :data="depts" :props="defaultprops" default-expand-all :expand-on-click-node="false">
                <!-- 节点结构 -->
                <!-- 这里需要运用插槽
                当父节点与子节点的数据相同时 只有父节点的下拉框会显示,因为找不到这两个节点的区别 ,子节点的下拉框就不会显示
                使用插槽时 会根据节点的数量渲染
                插槽里会默认接收一个数据scoped对象 
                这个对象里的data保存的是当前节点的数据
                -->
                <template v-slot="{ data }">
                    <el-row type="flex" style="width: 100%;" justify="space-between" align="middle">
                        <el-col>{{ data.name }}</el-col>
                        <el-col :span="8">
                            <span style="margin: 0 10px;">{{ data.managerName }}</span>
                            <el-dropdown @command="clickdropdown($event, data.id)">
                                <span class="el-dropdown-link">
                                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="add">添加</el-dropdown-item>
                                    <el-dropdown-item command="set">修改</el-dropdown-item>
                                    <el-dropdown-item command="del">删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-col>
                    </el-row>
                </template>
            </el-tree>
        </div>
        <adddept ref="dldept" :title="title" :showdialog="showdialog" @closedail="closedail" :activeid="activeid"
            @getdeptdata="getdepartmentdata"></adddept>
    </div>
</template>
<script>
import { getdepartment,deladept } from '@/api/department';
import { listchangetree } from '@/utils/index'
import adddept from './components/adddept.vue';
export default {
    name: 'Department',
    components: { adddept },
    data() {
        return {
            depts: [],
            defaultprops: {
                label: 'name',//显示的字段名称
                children: 'children'//子级对象
            },
            showdialog: false,//控制dialog是否显示
            activeid: null,//保存当前带点击的id 将他传给子组件 来当作pid 使用
            title: ''
        }
    },
    methods: {
        //获取组织架构数据
        async getdepartmentdata() {
            const res = await getdepartment()
            this.depts = listchangetree(res, 0)
        },
        //显示对话框
        clickdropdown(type, id) {
            if (type === 'add') {
                this.showdialog = true
                this.activeid = id
                this.title = '新增部门'
            }
            else if (type === 'set') {
                this.title = '修改部门'
                this.showdialog = true
                this.activeid = id //更新子组件的props 异步操作
                //要等待props数据更新完成之后在调用接口
                //this.$nextTick()方法等数据更新完成在执行回调函数
                this.$nextTick(() => {
                    this.$refs.dldept.getdeptdatabyid()
                })
            }
            //删除
            else {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async() => {
                   await deladept(id)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getdepartmentdata()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }
        },
        closedail(val) {
            this.showdialog = val
        },
    },
    created() {
        this.getdepartmentdata()
    }
}
</script>

<style scoped>
.app-container {
    padding: 30px 140px;
    font-size: 14px;
}
</style>